<template>
  <div style="display: flex;flex:1;flex-direction: column">
    <div class="grid">
      <div class="item" v-for="(item,index) in $data.wheres" :key="index">

        <el-autocomplete
            v-model="item.column"
            @change="change_click"
            :fetch-suggestions="querySearch"
            clearable
            style="width:180px;"
        />

        <el-select v-model="item.op" @change="change_click">
          <el-option v-for="item in all_ops"
                     :key="item"
                     :label="item"
                     :value="item"></el-option>
        </el-select>
        <el-input v-model="item.value" @change="change_click" style="width:180px;"/>

        <el-button :icon="DeleteFilled" plain round @click="delete_click(item)" size="small"
                   type="warning">
        </el-button>
      </div>
    </div>
    <!--        <el-button size="small" icon="el-icon-plus" type="primary" round @click="add_click"-->
    <!--                   style="width: 120px;display: block;margin-top:10px;">添加条件-->
    <!--        </el-button>-->
  </div>
</template>
<style lang="scss" scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  grid-gap: 8px;

  .item {
    display: inline-flex;
  }

}
</style>
<script setup>
/**
 * Created by CodeGenerator  at 2022-09-07 13:54:56
 */


import {Delete, DeleteFilled} from '@element-plus/icons-vue'

defineOptions({
  name: "where",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({wheres: []});


const $props = defineProps({
  ops: {type: String},
  columns: {type: Array},
});


const $model = defineModel({type: Array});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const all_ops = $computed(function () {

  return  ['=', '<', '<=', '>', '>=', '!=', 'like']
});

const querySearch = (queryString, cb) => {
   var list = $props.columns.filter(it => it .includes(queryString));
    cb(list.map(it => {
      return {value: it}
    }));

}



const change_click = function () {
  if (!$data.wheres.filter(it => !it.column).length) {
    add_click();
  }
  $emit("update:modelValue", $data.wheres);
};
const delete_click = function (item) {
  $data.wheres.removeItem(item);
  change_click();
};
const add_click = function () {
  $data.wheres.push({column: "", op: "=", value: ""});
  change_click();
};


watch($model, function (v) {
  if (jv.dataEquals(v, $data.wheres)) {
    change_click();
    return;
  }
  $data.wheres = v;
}, {immediate: true, deep: true});

</script>
